<template>
  <div class="search">
    <div class="search-box">
      <i class="fa fa-search" aria-hidden="true"></i>
      <input
        placeholder="搜索歌曲、歌手、专辑"
        v-model="keywords"
        @keyup.enter="search"
        @input="inputing"
      />
      <i class="fa fa-times-circle" v-show="showdel" @click="clearWord"></i>
    </div>
    <hr />
    <component
      :is="showComponent"
      :keywords="keywords"
      @changekeyword="changekeyword"
      @play="play"
      :playMUsicID="playMUsicID"
    >
    </component>
  </div>
</template>

<script>
import SearchHot from "@/components/SearchHot.vue";
import SearchSug from "@/components/SearchSug.vue";
import SearchResult from "@/components/SearchResult.vue";
export default {
  name: "Search",
   props:{
    playMUsicID:Number
  },
  data() {
    return {
      showComponent: SearchHot,
      keywords: "",
      showdel: false,
    };
  },
  methods: {
    play(event) {
      this.$emit("play", event);
    },
    search() {
      this.showComponent = SearchResult;
    },
    changekeyword(event) {
      this.showdel = true;
      this.keywords = event;
      this.showComponent = SearchResult;
    },
    inputing() {
      if (this.keywords == "") {
        this.showComponent = SearchHot;
        this.showdel = false;
      } else {
        this.showComponent = SearchSug;
        this.showdel = true;
      }
    },
    clearWord() {
      this.keywords = "";
      this.showdel = false;
      this.$route.meta.hideNav=true;
      if(this.$route.path=='/search'){
        this.$router.push("/searchali");
      }else{
        this.$router.push("/search");
      }
      this.showComponent = SearchHot;
    },
  },
  components: {
    SearchHot,
    SearchSug,
    SearchResult,
  },
};
</script>
<style lang="less" scoped>
.search-box {
  margin: 15px 10px;
  background-color: #ebecec;
  border-radius: 19px;
  padding: 5px 30px;
  position: relative;
  i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #c9c9c9;
    font-size: 16px;
    &.fa-search {
      left: 12px;
    }
    &.fa-times-circle {
      right: 12px;
    }
  }
  input {
    width: 100%;
    height: 15px;
    font-size: 14px;
    background-color: transparent;
    border: none;
    outline: none;
    color: #333;
  }
}
.search {
  hr {
    height: 0px;
    border: none;
    border-bottom: 1px solid #ebecec;
  }
}
</style>
